<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script src="js/shape.js"></script>
    <script src="js/canvas.js"></script>
    <link rel="stylesheet" href="css/canvas.css">
</head>
<body>
   <div class="box">
      <ul class="menu">
          <li class="active">文件</li>
          <li>画图</li>
          <li>颜色</li>
          <li>类型</li>
          <li>线条宽度</li>
          <li>擦除</li>
      </ul>
      <div class="body">
          <div class="tools">
                <ul class="option opt-active">
                    <li class="new">新建</li>
                    <li class="back">返回</li>
                    <li class="save">保存</li>
                </ul>
              <ul class="option">
                  <li data-role="line">线条</li>
                  <li data-role="rect">矩形</li>
                  <li data-role="arc">圆</li>
                  <li data-role="bian">多边形</li>
                  <li data-role="jiao">多角形</li>
                  <li data-role="pen">钢笔</li>
              </ul>
              <ul class="option">
                  <li>
                      <input type="color" data-role="strokeStyle">
                  </li>
                  <li>
                      <input type="color" data-role="fillStyle">
                  </li>

              </ul>

              <ul class="option">
                  <li data-role="stroke">
                     画线
                  </li>
                  <li data-role="fill">
                     填充
                  </li>

              </ul>

              <ul class="option">
                  <li data-role="1">
                      细
                  </li>
                  <li data-role="5">
                      中
                  </li>
                  <li data-role="10">
                      粗
                  </li>
                  <li class="input">
                      <input type="number" placeholder="请输入数字">
                  </li>

              </ul>

              <ul class="option">
                  <li>
                      <input type="number" value="10" placeholder="请输入大小">
                  </li>
              </ul>
          </div>
          <div class="canvas">
              <canvas width="700" height="370">
              </canvas>
              <div class="copy"></div>
              <div class="xp"></div>
          </div>
      </div>
   </div>

</body>
</html>